

import React from 'react';
import {Progress } from 'antd'
import { MsgBase } from './Base';
import { IMessageItem } from './type';
import { MSG_TYPE } from '@/pages/home/config';
const stepProcess: { [key: string]: number } = {
    wait:0,
    first: 10,
    second: 20,
    third: 25,
    four:40,
    five:60,
    six:70,
    seven: 89,
    nine:100
}
export function MessageWait(props: { message: IMessageItem; onCloseJob: (msg:IMessageItem) => void;}) { 
    const { type,step = 0 } = props.message
    const isWatting = type === MSG_TYPE.WATTING
    return (
        <div className="waitingArea">
            { !isWatting?<Progress strokeColor={{ from: '#EF3964', to: '#E47A19' }} trailColor="#FDEBF0" percent={step} showInfo={false} />:null}
            <div className="stateText">
                <span className='text'>{ isWatting?'等待开始...':`生成中 ${step}%`}</span>
                <span className='cancelBtn' onClick={()=>props.onCloseJob(props.message)}>取消任务</span>
            </div>
        </div>
    )
}